<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        li {
            list-style: none;
        }

        .banner {
            width: 300px;
            height: 200px;
            margin: 100px auto;
            background-color: #f00;
            overflow: hidden;
            position: relative;
        }

        .banner ul {
            width: 1200px;
            display: flex;
            position: absolute;
            left: 0;
        }

        .banner ul li {
            width: 300px;
            height: 200px;
            text-align: center;
            line-height: 200px;
            font-size: 50px;
        }


        .banner ol {
            width: 100%;
            position: absolute;
            display: flex;
            justify-content: center;
            bottom: 0;
        }

        .banner ol li {
            width: 20px;
            height: 20px;
            background-color: #ff0;
            margin: 10px;
        }

        .banner span {
            width: 20px;
            height: 30px;
            background-color: rgba(0, 0, 0, .5);
            position: absolute;
            display: flex;
            justify-content: center;
            align-items: center;
            top: 0;
            bottom: 0;
            margin: auto;
            color: #fff;
        }

        #next {
            right: 0;
        }
    </style>
</head>

<body>


    <div class="banner">
        <ul id="ul" class="u">
            <li>1</li>
            <li>2</li>
            <li>3</li>
            <li>4</li>
        </ul>
        <ol>
            <li class="dot" style="background:green;"></li>
            <li class="dot"></li>
            <li class="dot"></li>
            <li class="dot"></li>
        </ol>
        <p>
            <span id="prev">&lt;</span>
            <span id="next">&gt;</span>
        </p>
    </div>



    <script>


        // 轮播
        //   每隔1s之后，播放下一张图片   ul的left值向左移动

        var oUl = document.getElementsByClassName('u')[0];  // 伪数组  数组中只有一个值
        console.log(oUl);

        var oLis = document.getElementsByClassName('dot');    // 获取元素，得到伪数组
        console.log(oLis);

        var oPrev = document.getElementById('prev');
        var oNext = document.getElementById('next');

        // 计数器  记录播放的第几张
        var index = 0;

        var t ;

        // 自动播放
        autoPlay() ;

        // 翻页
        //    清除定时器
        //    显示对应的那一张
        oPrev.onclick = function() {
            clearInterval(t) ;
            if(index === 0) {
                index = 4 ;
            }
            index-- ;
            show() ;
            autoPlay() ;
        }


        // 下翻页
        oNext.onclick = function() {
            clearInterval(t) ;
            if(index === 3) {
                index = -1 ;
            }
            index++ ;
            show() ;
            autoPlay() ;
        }




        // 小点切换
        // oLis[0].onclick = function() {
        //     clearInterval(t) ;
        //     index = 0 ;
        //     show() ;
        //     autoPlay() ;
        // }

        // oLis[1].onclick = function() {
        //     clearInterval(t) ;
        //     index = 1 ;
        //     show() ;
        //     autoPlay() ;
        // }

        // oLis[2].onclick = function() {
        //     clearInterval(t) ;
        //     index = 2 ;
        //     show() ;
        //     autoPlay() ;
        // }

        // oLis[3].onclick = function() {
        //     clearInterval(t) ;
        //     index = 3 ;
        //     show() ;
        //     autoPlay() ;
        // }



        // 改成循环就直接报错 了？？？？？？？？？？？？？？？
        // for(var i = 0 ; i < 4 ; i++) {
        //     oLis[i].onclick = function() {
        //         clearInterval(t) ;
        //         index = i ;
        //         show() ;
        //         autoPlay() ;
        //     }

        // }


        for(var i = 0 ; i < 4 ; i++) {
            // 给这个标签对象添加自定义属性 名字suiBian 
            oLis[i].suibian = i ;
            oLis[i].onclick = function() {
                clearInterval(t) ;
                index = this.suibian ;
                show() ;
                autoPlay() ;
            }

        }


        // 实现自动轮播
        function autoPlay() {
            t = setInterval(function () {
                if (index === 3) {
                    index = -1;
                }
                index++;
                show();
            }, 1000)

        }


        // 显示当前这一张
        //    ul要移动对应的位置
        //    小方块的颜色也跟着变化
        function show() {
            // ul移动在当前这一张的位置
            oUl.style.left = - index * 300 + 'px';
            // 小方块也需要移动位置
            // 先清除所有的小方块的颜色
            for (var i = 0; i < oLis.length; i++) {
                oLis[i].style.background = 'yellow';
            }
            // 把当前播放的这一张变成绿色   index
            oLis[index].style.background = 'green';
        }









    </script>

</body>

</html>